<template>
	<view>
		<view class="page-head">
			<view class="g_tabbar1 flex-box flex-between">
				<view class="item" :class="{ active: tab1Idx == -1 }" @click="tabbar1Change(-1)">全部</view>
				<view class="item" :class="{ active: tab1Idx == 0 }" @click="tabbar1Change(0)">待付款</view>
				<view class="item" :class="{ active: tab1Idx == 1 }" @click="tabbar1Change(1)">已付款</view>
				<view class="item" :class="{ active: tab1Idx == 2 }" @click="tabbar1Change(2)">已退款</view>
			</view>
		</view>
		<view class="container pr">
			<image class="m-backdrop" src="../../static/icon/icon_back2.png" mode="widthFix"></image>
			<view class="order_list pr">
				<navigator class="order_item mb20" :url="'/pages/offline_order_detail/offline_order_detail?order_id='+item.id" hover-class="none" v-for="(item,index) in courseOrderLists" :key="item.id">
					<view class="flex-box p25 m-hairline--bottom">
						<view class="order_num flex-1">订单编号：{{item.order_no}}</view>
						<view class="status">{{item.refund_status==3?"已退款":(item.pay_status==1?'已支付':'待付款')}}</view>
					</view>
					<view class="goods-list1 p25">
						<view class="item flex-box">
							<image class="i_goods" :src="item.course_image" mode="aspectFill"></image>
							<view class="flex-1">
								<view class="name m-ellipsis mb10">{{item.course_name}}</view>
								
								<view class="price1">
									<text>¥</text>
									<text>{{item.pay_price}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="status p25">下单时间：{{$formatDatetime(item.createtime,'yyyy-mm-dd hh:ii:ss')}}</view>
				</navigator>
				
				<view class="g-btn3-wrap">
					<view class="g-btn3"  :class="{nomore: courseOrderListsMore.nomore == true}" @click="fetch()">{{courseOrderListsMore.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('@/xiluedu/util.js');
export default {
	data() {
		return {
			tab1Idx: -1,
			courseOrderLists:[],
			courseOrderListsMore:{page:1,text:'正在加载...'}
		};
	},
	onLoad(options) {
		this.tab1Idx = options.tab1Idx || -1
		this.fetch();
	},
	methods: {
		tabbar1Change(i) {
			this.tab1Idx = i;
			this.refresh();
		},
		refresh(){
			this.courseOrderLists = [],
			this.courseOrderListsMore = {page:1}
			this.fetch();
		},
		
		fetch() {
			let tab1Idx = this.tab1Idx;
		    util.fetch(this, 'xiluedu.offline_order/lists', {tab:tab1Idx,pagesize:10}, 'courseOrderListsMore', 'courseOrderLists', 'data', data=>{
		    
		    })
		},
	}
};
</script>

<style scoped>
.container {
	background: rgb(247, 247, 247);
}
.page-head {
	padding: 0 50rpx;
}

.g_tabbar1 {
	height: 100rpx;
}
.g_tabbar1 .item {
	position: relative;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 100rpx;
}

.g_tabbar1 .item.active {
	font-weight: bold;
}

.g_tabbar1 .item.active::after {
	position: absolute;
	left: 50%;
	bottom: 15rpx;
	transform: translateX(-50%);
	content: '';
	width: 92rpx;
	height: 4rpx;
	background: #ffffff;
	border-radius: 2rpx;
}

.order_list {
	margin-top: 100rpx;
	padding: 10rpx 30rpx 30rpx;
	overflow-y: scroll;
	height: calc(100vh - 100rpx);
	z-index: 10;
}

.order_list .order_item {
	background: #ffffff;
	border-radius: 20rpx;
}

.order_list .order_num {
	font-size: 24rpx;
	color: #333333;
	line-height: 28rpx;
}

.order_list .status {
	font-size: 24rpx;
	color: #999999;
	line-height: 28rpx;
}

.goods-list1 .i_goods {
	margin: 0 35rpx 0 0;
	display: block;
	width: 122rpx;
	height: 122rpx;
}

.goods-list1 .name {
	font-size: 30rpx;
	font-weight: 400;
	color: #101010;
	line-height: 40rpx;
}

.goods-list1 .spec {
	font-size: 24rpx;
	color: #999999;
	line-height: 28rpx;
}

.goods-list1 .price1 {
	font-size: 24rpx;
	font-weight: 500;
	color: #ff5512;
	line-height: 28rpx;
}

.goods-list1 .price1 text:nth-of-type(2) {
	font-size: 30rpx;
	line-height: 34rpx;
}
</style>
